<template>
  <div class='orderBox'>
    <h2 class='pageTitle'>填写订单信息</h2>
    <div class='infoBox'>
      <!-- <div class="title">会议室租赁订单信息</div> -->
      <div class='infoTitle'>
        <span>租赁公司</span>
      </div>
      <div class='infoDetail'>
        <el-row :gutter='20'>
          <el-col :span='10'
          >
            <div>公司名称：{{ companyData.companyName }}</div>
          </el-col
          >
          <el-col :span='6'
          >
            <div>联系人：{{ companyData.linkMan }}</div>
          </el-col
          >
          <el-col :span='8'
          >
            <div>联系方式：{{ companyData.linkPhone }}</div>
          </el-col
          >
        </el-row>
        <el-row :gutter='20'>
          <el-col :span='10'
          >
            <div>统一社会信用代码：{{ companyData.companyCode }}</div>
          </el-col
          >
          <el-col :span='6'
          >
            <div>法人：{{ companyData.legalMan }}</div>
          </el-col
          >
          <el-col :span='8'
          >
            <div>法人联系方式：{{ companyData.legalManPhone }}</div>
          </el-col
          >
        </el-row>
      </div>
      <div class='infoTitle'>
        <span>活动场地基础信息</span>
      </div>
      <div class='infoDetail'>
        <el-row :gutter='20'>
          <el-col :span='10'
          >
            <div>位置：{{ adressData.address }}</div>
          </el-col
          >

          <el-col :span='8'
          >
            <div>面积：{{ adressData.area }} ㎡</div>
          </el-col
          >
        </el-row>
      </div>
      <el-form
        :model='ruleForm'
        status-icon
        ref='ruleForm'
        label-width='auto'
        class='demo-ruleForm'
      >
        <div class='infoTitle'>
          <span>活动时间</span>
          <span v-if='adressData.areaType == 1' class='rightTxt'
          >小计：<span class='redTxt'>{{ dateCountPrice }}</span
          >元</span
          >
          <span v-else class='rightTxt'
          >小计：<span class='redTxt'>待定</span></span
          >
        </div>
        <div class='infoDetail'>
          <el-row
            :gutter='20'
            v-for='(item, index) in ruleForm.dateTimeArr'
            :key='index'
          >
            <div>
              <el-col :span='8'>
                <div>
                  <el-form-item label='活动日期'>
                    <el-date-picker
                      type='date'
                      placeholder='选择日期'
                      v-model='item.siteDate'
                      format='yyyy-MM-dd'
                      value-format='yyyy-MM-dd'
                      :picker-options='option'
                      @change='dateChange(item, index)'
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span='8'>
                <div>
                  <el-form-item label='活动时段'>
                    <el-select
                      v-model='item.siteTimeFrame'
                      placeholder='请选择活动时段'
                      :disabled="item.siteDate == ''"
                      @change='countDateInfo()'
                    >
                      <el-option
                        v-for='(it, index) in item.timeArr'
                        :key='index'
                        :label='it.label'
                        :value='it.value'
                        :disabled='it.disabled'
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span='8'>
                <div v-if='index == 0'>
                  <el-button
                    type='text'
                    icon='el-icon-plus'
                    @click='addDateTime()'
                  >增加活动时间
                  </el-button
                  >
                </div>
                <div v-else style='line-height: 40px'>
                  <el-button
                    type='danger'
                    size='mini'
                    icon='el-icon-delete'
                    circle
                    @click='delDateTime(index)'
                  ></el-button>
                </div>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter='20'>
            <el-col :span='10'
            >
              <div>历时：{{ dateCountNumber }}天</div>
            </el-col
            >
            <el-col :span='6'
            >
              <div v-if='adressData.areaType == 1'>
                价格：{{ dateCountPrice }}元
              </div>
              <div v-else>价格：待定</div>
            </el-col
            >
          </el-row>
        </div>

        <div class='infoTitle'>
          <span>活动场地租赁保证金</span>
          <span class='rightTxt' v-if='adressData.areaType == 1'
          >小计：<span class='redTxt'>{{ earnestMoney }}</span
          >元</span
          >
          <span class='rightTxt' v-else
          >小计：<span class='redTxt'>待定</span></span
          >
        </div>
        <div class='infoDetail'>
          <el-row :gutter='20'>
            <el-col :span='6' :offset='18'>
              <div>
                <el-form-item label='支付方式：'>
                  <el-radio-group v-model='ruleForm.val'>
                    <el-radio label='1'>全款支付</el-radio>
                    <!--                    <el-radio label="2">分期支付</el-radio>-->
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class='countNum'>
          <span>应付金额（元）：</span>
          <span v-if='adressData.areaType == 1' class='bigTxt'>{{
              allCountNumber
            }}</span>
          <span v-else class='bigTxt'>待定</span>
        </div>
      </el-form>
    </div>
    <div class='submitBox'>
      <el-button @click='back()'>返回</el-button>
      <el-button type='danger' @click='submitForm()'>确认提交</el-button>
    </div>
  </div>
</template>
<script>
import api from '../../../api/app'

export default {
  data() {
    return {
      id: 0,
      earnestMoney: 0,
      dateCountPrice: 0,
      dateCountNumber: 0,
      companyData: {},
      adressData: {},
      fullMoney: 0,
      halfMoney: 0,
      timeArr: [
        {
          label: '上午09:00-12:00',
          value: 1,
          disabled: false
        },
        {
          label: '下午14:00-18:00',
          value: 2,
          disabled: false
        },
        {
          label: '全天09:00-18:00',
          value: 3,
          disabled: false
        }
      ],
      meetingTimeList: [],
      ruleForm: {
        val: '1',

        dateTimeArr: [
          {
            siteDate: '',
            siteTimeFrame: null,
            timeArr: [
              {
                label: '上午09:00-12:00',
                value: 1,
                disabled: false
              },
              {
                label: '下午14:00-18:00',
                value: 2,
                disabled: false
              },
              {
                label: '全天09:00-18:00',
                value: 3,
                disabled: false
              }
            ]
          }
        ]
      },
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() + 2 * 24 * 3600 * 1000
        }
      }
    }
  },
  computed: {
    allCountNumber() {
      return this.earnestMoney + this.dateCountPrice
    }
  },
  created() {
    this.id = this.$route.query.id
  },
  mounted() {
    this.findLeaseUserInfo()
    this.findMeetInfo()
  },
  methods: {
    back() {
      this.$router.push({ path: '/activityOrder' })
    },
    dateChange(item, idx) {
      console.log(idx)
      let data = {
        id: this.id,
        day: item.siteDate
      }
      api
        .findDayLeaseSiteInfo(data)
        .then((res) => {
          console.log(res)
          if (res.data.data[0].siteTimeFrame == 1) {
            item.timeArr[0].disabled = true
            item.timeArr[2].disabled = true
          } else if (res.data.data[0].siteTimeFrame == 2) {
            item.timeArr[1].disabled = true
            item.timeArr[2].disabled = true
          } else if (res.data.data[0].siteTimeFrame == 3) {
            item.timeArr[0].disabled = true
            item.timeArr[1].disabled = true
            item.timeArr[2].disabled = true
          }
          this.$set(this.ruleForm.dateTimeArr, idx, item)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    submitForm() {
      if (this.getMeetingTimeList()) {
        console.log('Pass')
        this.addPlmMeetOrder()
      }
    },
    getMeetingTimeList() {
      let status = true
      let dateList = this.ruleForm.dateTimeArr
      if (dateList.length == 0) {
        this.$message({
          message: '您还没有选择预定日期',
          type: 'warning'
        })
        status = false
      }
      for (let j = 0; j < dateList.length; j++) {
        if (dateList[j].siteTimeFrame != null) {
          dateList[j].siteDate = dateList[j].siteDate + ' 00:00:00'
          this.meetingTimeList.push(dateList[j])
        } else {
          this.$message({
            message: '请确定日期和时段选择完整',
            type: 'warning'
          })
          status = false
        }
      }
      return status
    },
    addPlmMeetOrder() {
      let data = {
        companyCode: this.companyData.companyCode,
        companyId: this.companyData.companyId,
        companyName: this.companyData.companyName,
        legalMan: this.companyData.legalMan,
        legalManPhone: this.companyData.legalManPhone,
        linkMan: this.companyData.linkMan,
        linkPhone: this.companyData.linkPhone,
        plcSiteId: this.adressData.id,
        siteTimeList: this.meetingTimeList
      }
      api.addPlmSiteOrder(data).then(res => {
        console.log(res)
        this.$router.push({
          path: '/payment',
          query: { id: res.data.orderNumber, money: res.data.amount / 100 }
        })
      }).catch(err => {
        console.log(err)
      })
      console.log(data)
    },
    countDateInfo() {
      let dateList = this.ruleForm.dateTimeArr
      var countNum = 0
      let dateNum = 0
      for (let j = 0; j < dateList.length; j++) {
        if (dateList[j].siteTimeFrame == 1) {
          dateNum += 0.5
          countNum += this.halfMoney
        } else if (dateList[j].siteTimeFrame == 2) {
          dateNum += 0.5
          countNum += this.halfMoney
        } else if (dateList[j].siteTimeFrame == 3) {
          dateNum += 1
          countNum += this.fullMoney
        }
      }
      this.dateCountPrice = countNum
      this.dateCountNumber = dateNum
    },
    findLeaseUserInfo() {
      api
        .findLeaseUserInfo()
        .then((res) => {
          console.log(res)
          this.companyData = res.data.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    findMeetInfo() {
      let data = { siteId: this.id }
      api
        .findSiteInfo(data)
        .then((res) => {
          console.log(res)
          this.adressData = res.data.data
          this.fullMoney = res.data.data.fullMoney / 100
          this.halfMoney = res.data.data.halfMoney / 100

          this.earnestMoney = res.data.data.earnestMoney / 100
        })
        .catch((err) => {
          console.log(err)
        })
    },
    addDateTime() {
      let temObj = {
        siteDate: '',
        siteTimeFrame: null,
        timeArr: [
          {
            label: '上午09:00-12:00',
            value: 1,
            disabled: false
          },
          {
            label: '下午14:00-18:00',
            value: 2,
            disabled: false
          },
          {
            label: '全天09:00-18:00',
            value: 3,
            disabled: false
          }
        ]
      }
      this.ruleForm.dateTimeArr.push(temObj)
    },
    delDateTime(idx) {
      this.ruleForm.dateTimeArr.splice(idx, 1)
    }
  }
}
</script>
<style scoped>
.orderBox {
  margin-top: 50px;
  margin-bottom: 50px;
}

.pageTitle {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}

.infoBox {
  width: 1068px;
  margin: 0 auto;
  border: 1px solid #cccccc;
  text-align: left;
}

.title {
  font-size: 20px;
  /* text-align: center; */
  line-height: 50px;
  padding: 0 20px;
  color: #66b1ff;
  font-weight: bold;
}

.infoTitle {
  padding: 0 20px;
  background: #c4c4c4;
  line-height: 40px;
  color: #262424;
}

.infoTitle span.rightTxt {
  float: right;
  font-size: 14px;
}

.infoTitle span.rightTxt .redTxt {
  color: #ff4c4c;
  padding: 0 5px;
}

.infoDetail {
  padding: 15px 20px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
}

.infoDetail >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
}

.countNum {
  line-height: 50px;
  padding: 0 15px;
  background: #e7e6e6;
  color: red;
  text-align: right;
}

.countNum span.bigTxt {
  font-size: 1.1em;
}

.serviceCheckBox {
  margin-right: 30px;
}

.submitBox {
  width: 1068px;
  margin: 0 auto;
  text-align: right;
  margin-top: 50px;
}
</style>

